<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>眼健康咨询平台</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
</head>
<body style="color:#333;">
<div class="tophead">
    <div class="main">
        <h1>眼健康咨询平台</h1>
        <div class="showName" th:text="${name}"></div>
    </div>
</div>

<div class="gerenCon main">
    <div class="gerenCon_top">
        <!--<div class="box boxJC">
            <h3>三级防控</h3>
            <ul>
                <li id="JHY"><a href="/skip/jiancebiao">用眼行为监测</a></li>
                <dl>
                    <dt>用眼行为矫正</dt>
                    <dd id="Jz"></dd>
                </dl>
                <li id="TEAS"><a href="/skip/EyeTEAS">Eye-TEAS治疗</a></li>
            </ul>
        </div>

        <div class="box boxL">
            <h3>问答卷</h3>
            <ul>
                <li id="wj1"><a href="/skip/wenjuan1">儿童青少年心理健康量表</a></li>
                <li id="wj2"><a href="/skip/wenjuan2">儿童青少年体质量表</a></li>
                <li id="wj3"><a href="/skip/wenjuan3">疫情期间用眼行为和体育锻炼调查问卷</a></li>
            </ul>
        </div>-->

    </div>
    <div class="gerenCon_lishi">
        <h3>历史检查记录(三级预警)</h3>
        <div class="zdjg">
            <dl>
                <dt>左眼初步建议与预警提示：</dt>
                <dd th:text="${gerenAdvice.zdoctorchubu}"></dd>
                <dd th:text="${echarts.yj[0]}"></dd>
            </dl>
            <dl>
                <dt>右眼初步建议与预警提示：</dt>
                <dd th:text="${gerenAdvice.ydoctorchubu}"></dd>
                <dd th:text="${echarts.yj[1]}"></dd>
            </dl>

        </div>
        <div style="margin-bottom: 20px;margin-top: 20px" >

            <div id="test" style="width: 816px;height: 440px"></div>
        </div>
        <div class="zheLine">
            <ul>
                <li>
                    <p>左右眼视力</p>
                    <div id="main1"></div>
                </li>
                <li>
                    <p>散瞳前等效球镜</p>
                    <div id="main2"></div>
                </li>
                <li>
                    <p>眼轴长度</p>
                    <div id="main3"></div>
                </li>
            </ul>
        </div>
        <!--<h3>历史检查记录</h3>-->

        <table width="200" border="1" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>时间</th>
                <th colspan="2">裸眼视力</th>
                <th> </th>
            </tr>
            </thead>
            <tbody id="gerentable">
            <!--<tr>
                <td>2020-06-17</td>
                <td>左：5.0</td>
                <td>右：5.0</td>
                <td><a href="/skip/gerenchakan" target='_blank'>查看</a></td>
            </tr>
            <tr>
                <td>2019-09-10</td>
                <td>左：4.8</td>
                <td>右：4.9</td>
                <td><a href="/skip/gerenchakan" target='_blank'>查看</a></td>
            </tr>
            <tr>
                <td>2019-03-05</td>
                <td>左：5.0</td>
                <td>右：5.1</td>
                <td><a href="/skip/gerenchakan" target='_blank'>查看</a></td>
            </tr>-->
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    var table = [[${table}]];
    let name = [[${NAME}]];
    var html = '';
    var JHY = '<a href="/skip/jiancebiao?name='+table[0].name+'&idCard='+table[0].idCard+'">用眼行为监测</a>';
    var TEAS = '<a href="/skip/EyeTEAS?name='+table[0].name+'&idCard='+table[0].idCard+'">Eye-TEAS治疗</a>'
    $("#wj1").html('<a href="/skip/wenjuan1?name='+table[0].name+'&idCard='+table[0].idCard+'">儿童青少年心理健康量表</a>')
    $("#wj2").html('<a href="/skip/wenjuan2?name='+table[0].name+'&idCard='+table[0].idCard+'">儿童青少年体质量表</a>')
    $("#wj3").html('<a href="/skip/wenjuan3?name='+table[0].name+'&idCard='+table[0].idCard+'">疫情期间用眼行为和体育锻炼调查问卷</a>')
    $('#JHY').html(JHY)
    $('#TEAS').html(TEAS)
    if (table.length>0) {
        for (var i = 0; i <table.length ; i++) {
            html+='<tr><td>'+table[i].checkdate+'</td><td>左：'+table[i].luoyanl+'</td><td>右：'+table[i].luoyanr+'</td><td><a href="/skip/gerenchakanQDT?name='+table[i].name+'&idCard='+table[i].idCard+'&checkdate='+table[i].checkdate+'&checkType='+table[i].checkType+'&age='+table[i].age+'" target=\'_blank\'>查看</a></td></tr>'
        }
        $('#gerentable').html(html)
    }
    var idCard = [[${idCard}]]
    $('#Jz').html('<a href="/skip/jiaose/jiazhang?idCard='+idCard+'&name='+name+'">家长</a><a href="/skip/jiaose/haizi?idCard='+idCard+'">孩子</a>')
</script>
</body>
</html>
<script type="text/javascript" th:inline="javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('test'))
    var echarts = [[${echarts}]];

    //折线图1
    setTimeout(function () {
        var luoyantime = echarts.luoyantime
        luoyantime.splice(0,1);
        option = {
            title: {
                //text: '点击量',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#000',//标题颜色
                },

                x:"left"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['左眼','右眼'],
                textStyle: {
                    "fontSize": 14,
                    color:'#000',
                }
            },
            grid: {
                left: '0',
                top:'30',
                right: '30',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: luoyantime,
                axisLabel: {
                    //formatter: '{value} 年',//单位
                    textStyle: {
                        fontSize : 14 ,
                        color:'#000'
                    },
                    interval:0,
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    //formatter: '{value} ml',//单位
                    textStyle: {
                        fontSize : 14,
                        color:'#000'
                    },
                }
            },
            series: [
                {
                    name:'左眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    itemStyle: {
                        normal: {
                            color: "#ff5a00",//折线点的颜色
                            lineStyle: {
                                color: "#ff5a00"//折线的颜色
                            }
                        }
                    },
                    data:echarts.luoyanl
                },
                {
                    name:'右眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    itemStyle: {
                        normal: {
                            color: "#20a01d",//折线点的颜色
                            lineStyle: {
                                color: "#20a01d"//折线的颜色
                            }
                        }
                    },
                    data:echarts.luoyanr
                }
            ]
        };

        myChart1.setOption(option);
    });

    //折线图2
    setTimeout(function () {
        var dxqjtime = echarts.dengxiaoqiujingtime;
        dxqjtime.splice(0,1);
        option = {
            title: {
                //text: '点击量',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#000',//标题颜色
                },

                x:"left"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['左眼','右眼'],
                textStyle: {
                    "fontSize": 14,
                    color:'#000',
                }
            },
            grid: {
                left: '0',
                top:'30',
                right: '30',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dxqjtime,
                axisLabel: {
                    //formatter: '{value} 年',//单位
                    textStyle: {
                        fontSize : 14 ,
                        color:'#000'
                    },
                    interval:0,
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    //formatter: '{value} ml',//单位
                    textStyle: {
                        fontSize : 14,
                        color:'#000'
                    },
                }
            },
            series: [
                {
                    name:'左眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    itemStyle: {
                        normal: {
                            color: "#ff5a00",//折线点的颜色
                            lineStyle: {
                                color: "#ff5a00"//折线的颜色
                            }
                        }
                    },
                    data:echarts.dengxiaoqiujingl
                },
                {
                    name:'右眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            color: "#20a01d",//折线点的颜色
                            lineStyle: {
                                color: "#20a01d"//折线的颜色
                            }
                        }
                    },
                    data:echarts.dengxiaoqiujingr
                }
            ]
        };

        myChart2.setOption(option);
    });

    //折线图3
    setTimeout(function () {
        option = {
            title: {
                //text: '点击量',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#000',//标题颜色
                },

                x:"left"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['左眼','右眼'],
                textStyle: {
                    "fontSize": 14,
                    color:'#000',
                }
            },
            grid: {
                left: '0',
                top:'30',
                right: '30',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: echarts.yanzhoutime,
                axisLabel: {
                    //formatter: '{value} 年',//单位
                    textStyle: {
                        fontSize : 14 ,
                        color:'#000'
                    },
                    interval:0,
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    //formatter: '{value} ml',//单位
                    textStyle: {
                        fontSize : 14,
                        color:'#000'
                    },
                }
            },
            series: [
                {
                    name:'左眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    itemStyle: {
                        normal: {
                            color: "#ff5a00",//折线点的颜色
                            lineStyle: {
                                color: "#ff5a00"//折线的颜色
                            }
                        }
                    },
                    data:echarts.yanzhoul
                },
                {
                    name:'右眼',
                    smooth:true,
                    symbol:"circle",
                    type:'line',
                    itemStyle: {
                        normal: {
                            color: "#20a01d",//折线点的颜色
                            lineStyle: {
                                color: "#20a01d"//折线的颜色
                            }
                        }
                    },
                    data:echarts.yanzhour
                }
            ]
        };

        myChart3.setOption(option);
    });

    setTimeout(function (){

        var ecBoxY = ['','远视','近视临床前期','假性近视','轻度近视','中度近视','高度近视']
        var ecBoxYIndex = -1

        var option = {
            grid: {
                left: '0',
                top:'90',
                right: '30',
                bottom: '0',
                containLabel: true
            },
            title: {
                text: '历次检测状况及预测',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: '20'
                }
            },
            animation: false,
            xAxis: {
                type: 'category',
                axisLine: {
                    show: false, //是否显示坐标刻度
                    lineStyle: {
                        color: '#eeeeee'
                    }
                },
                axisLabel: {
                    //标签样式
                    textStyle: {
                        fontSize: 14,
                        color: '#999999'
                    }
                },
                data: echarts.typeTime
            },
            yAxis: {
                type: 'value',
                splitNumber: 6, //分段数
                max:6,  // 这里不写最大值会容易出问题
                axisLine: {
                    show: false, //是否显示坐标刻度线
                    lineStyle: {
                        color: "#f2f4f3"
                    }
                },
                axisLabel: {
                    inside: true, //刻度值卸载y轴右侧
                    padding: [-50, 0, 0, 0], //标签的位置
                    textStyle: {
                        fontSize: 14,
                        color: '#999999'
                    },
                    formatter: function() {
                        return ecBoxY[ecBoxYIndex += 1]
                    },
                }
            }/*,
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [
                    {
                        lte: 5,
                        color: '#0090ff'
                    },
                    {
                        gt: 5,
                        lte: 9,
                        color: '#0090ff'
                    },
                    {
                        gt: 9,
                        color: '#0090ff'
                    }
                ]
            }*/,
            series: [
                {
                    name: '',
                    type: 'line',  // 这里可以按需修改 改成bar就是柱状图
                    smooth: false,
                    symbol: 'circle', //标记的样式（小圆点）
                    symbolSize: 10, //标记的尺寸
                    data: echarts.typeList
                }
            ]
        }
// 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option)
    })
</script>



